<template>
  <div>
    <div class="XboxTop">
      <div class="XboxTop_title">最新监测</div>
    </div>
    <div class="XboxTop_con" style="padding: 1rem;overflow-y: auto;scrollbar-width: none;">
      <div v-for="(item, i) in videoList" :key="i" class="list_item">
        <div class="list_item_top"><div>{{ item.name }}</div><div><i class="el-icon-caret-bottom" style="color: #0E66FF;"></i></div></div>
        <div style="width: 100%;height: 15rem">
          <video :src="item.url" style="width: 100%;height: 100%;"></video>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  //变量
  data() {
    return {
      videoList: [{ name: "xxxx", url: "" }, { name: "xxxx2", url: "" }, { name: "xxxx3", url: "" }, { name: "xxxx4", url: "" }],
    }
  },
  //初始
  mounted() { },
  //事件
  methods: {},
  //销毁
  beforeDestroy() { }
}
</script>
<style scoped>
.list_item {
  border: 1px solid #0E5FFF;
  margin-bottom: 1rem;
}

.list_item_top {
  border: 1px solid #0E5FFF;
  background: rgba(14, 95, 255, 0.12);
  box-shadow: 0 0 12px 0 #2087F9 inset;
  /* background: url("~@/assets/hb_img/bj/bg_hb.png") no-repeat;
  background-size: 100% 100%; */
  padding: 0.5rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>